<template>
  <div class="planning_list">
    <div class="planning_list_contaniner" v-if="viewShow">
      <!-- 头部容器 -->
      <el-container class="planning__list__top">
        <el-aside width="200px" class="top__aside">
          <i class="el-icon-document"></i>
          <span>产品信息管理</span>
        </el-aside>
        <el-main>
          <el-form
            v-model="search_form"
            label-position="right"
            ref="search_form"
            label-width="80px"
            class="planning__form"
            size="small"
          >
            <el-row justify="start">
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="名称">
                  <el-input v-model="search_form.name"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="产品代号">
                  <el-input v-model="search_form.product_code"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="开发平台">
                  <el-input
                    v-model="search_form.development_platform"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="策划负责人" label-width="100px">
                  <el-input v-model="search_form.plan_leader" />
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="12" :xs="24">
                <el-form-item label="上市时间">
                  <el-date-picker
                    v-model="search_form.market_time"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="类别">
                  <el-select
                    clearable
                    v-model="search_form.category"
                    placeholder="请选择类别"
                  >
                    <el-option
                      v-for="item in categoryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="产品规格">
                  <el-input v-model="search_form.specification"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="出风方式">
                  <el-input v-model="search_form.wind_type"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="开发科室">
                  <el-select
                    clearable
                    v-model="search_form.project_office"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in projectOfficeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :md="12" :xs="24">
                <el-form-item label="销售渠道" class="distribution_channel">
                  <el-cascader
                    clearable
                    style="width: 100%"
                    v-model="search_form.distribution_channel"
                    :options="channel_options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange"
                  >
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="品牌">
                  <el-input v-model="search_form.brand"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="能效等级">
                  <el-input v-model="search_form.energy_level"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="8" :xs="24">
                <el-form-item label="项目类别">
                  <el-select
                    v-model="search_form.type"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="8" :md="8" :xs="24">
                <el-button type="primary" @click="handleTest"> 查询 </el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="handleCreate">新建</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
      </el-container>
      <!-- 头部容器结束 -->

      <!-- 策划列表 -->
      <el-table
        ref="planningListTable"
        stripe
        border
        v-loading="tableLoading"
        :data="tableData"
        tooltip-effect="light"
        style="width: 100%; min-height: 800px"
      >
        <!-- <el-table-column type="selection" width="40" align="center" /> -->
        <el-table-column prop="id" label="序号" width="60" align="center" />
        <el-table-column label="产品名称" width="210" align="center">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.name }}</span>
            </div>
            <!-- <hr /> -->
            <div>
              <el-tag size="mini" v-show="scope.row.productCode"
                >代号：{{ scope.row.productCode }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="energyLevel"
          label="能效等级"
          width="120"
          align="center"
        />
        <el-table-column
          prop="category"
          label="类别"
          width="60"
          align="center"
        />
        <el-table-column
          prop="specification"
          label="规格"
          width="120"
          align="center"
        />
        <el-table-column prop="material" label="外观材质" align="center" />
        <el-table-column prop="color" label="颜色" width="90" align="center" />
        <el-table-column prop="func" label="功能" align="center">
          <template slot-scope="scope">
            <el-tag
              style="margin: 2px"
              size="mini"
              v-for="item in changeFunc(scope.row.func)"
              :key="item.index"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="windType" label="出风方式" align="center" />
        <el-table-column
          label="样机评审时间"
          width="180"
          align="center"
          prop="plan_date"
        >
          <template slot-scope="scope">
            <div>
              <div>
                <span>样机评审：{{ parseDate(scope.row.prototype_date) }}</span>
              </div>
              <el-tag
                v-if="scope.row.prototype_state == 'true'"
                size="mini"
                type="success"
                >完成</el-tag
              >
              <el-tag v-else size="mini" type="danger">未完成</el-tag>
            </div>
            <div>
              <span>上市时间：{{ parseDate(scope.row.market_date) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="project_leader"
          label="策划负责人"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="project_office"
          label="开发科室"
          width="120"
          align="center"
        />
        <!-- <el-table-column
          prop="distribution_channel"
          label="销售渠道"
          width="120"
          align="center"
        /> -->
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-link type="primary" @click="detail(scope.row.id)">详情</el-link>
            |
            <el-link type="primary" @click="handleEdit(scope.row.id)"
              >编辑</el-link
            >
            <!-- | -->
            <!-- <el-button
              type="danger"
              @click="handleDelete(scope.row.id)"
              icon="el-icon-delete"
              circle
            >
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 策划列表结束 -->

      <!-- 分页栏 -->
      <div class="planListPagination">
        <el-pagination
          small
          layout="prev, pager, next, jumper, total"
          :total="totalCount"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          style="display: inline-block; padding-left: 0px"
          v-show="this.tableData.length > 0"
        >
        </el-pagination>
        <el-button type="button" size="small">确定</el-button>
      </div>
      <!-- 分页栏结束 -->
    </div>
  </div>
</template>
<script>
import { postRequest } from "../api/api";
import { SelectData } from "@/mixins/select-data.js";
export default {
  mixins: [SelectData],
  data() {
    return {
      tableLoading: true,
      mainTableKey: 1,
      params: {
        pageSize: 10,
        currentPage: 1,
      },
      totalCount: -1,
      viewShow: true,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      multipleSelection: [],
      search_form: {
        pageSize: 10,
        currentPage: 1,
        name: "",
        product_code: "",
        energy_level: "",
        category: "",
        project_office: "",
        development_platform: "",
        plan_leader: "",
        market_time: "",
        specification: "",
        wind_type: "",
        brand: "",
        series_name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: "",
        resource: "",
        desc: "",
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
        distribution_channel: "",
      },
    };
  },
  //方法列表

  methods: {
    postPlanningList(data) {
      postRequest("/plan/all", data).then((res) => {
        var _this = this;
        _this.tableLoading = false;
        _this.totalCount = res.data.data.totalCount;
        console.log(this.totalCount);
        var records = res.data.data.records;
        for (let item of records) {
          // console.log(item.func);
          if (item.func.length > 0) {
            let func_list = item.func.split(",");
            console.log(func_list);
          }
        }
        _this.tableData = records;
      });
    },
    detail(id) {
      // window.bus.$emit("planning_list", this.search_form);
      this.$router.push({ path: "planning_detail/" + id });
    },
    handleCreate() {
      if (this.currentUser.office != "2") {
        this.$message.warning("只有策划室可以新建策划");
        return;
      }
      this.$router.push({ path: "planning_create" });
    },

    handleEdit(id) {
      // window.bus.$emit("planning_list", this.search_form);
      // window.bus.$on("planning_list", function (e) {
      //   console.log(e);
      // });
      this.$router.push({ path: "planning_edit/" + id });
    },
    handleDelete(id) {
      this.$confirm("确定要删除该策划吗?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.tableLoading = true;
          let params = this.search_form;
          postRequest("plan/plan_delete", { id: id })
            .then((res) => {
              postRequest("/plan/all", params).then((res) => {
                this.totalCount = res.data.data.totalCount;
                console.log("totalCount", this.totalCount);
                let totalPage = Math.ceil(this.totalCount / this.pageSize);
                if (this.currentPage > totalPage) {
                  this.currentPage = totalPage;
                  params.currentPage = this.currentPage;
                  postRequest("/plan/all", params).then((res) => {
                    let records = res.data.data.records;
                    this.tableData = records;
                    this.tableLoading = false;
                  });
                } else if (this.currentPage < 1) {
                  this.currentPage = 1;
                  params.currentPage = this.currentPage;
                  postRequest("/plan/all", params).then((res) => {
                    let records = res.data.data.records;
                    this.tableData = records;
                    this.tableLoading = false;
                  });
                } else {
                  let records = res.data.data.records;
                  this.tableData = records;
                  this.tableLoading = false;
                }
              });
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch((err) => {
          this.$message.error("已取消");
          this.tableLoading = false;
        });
    },
    changeFunc(func) {
      if (func.length > 0) {
        let func_list = [];
        func_list = func.split(",");
        return func_list;
      } else {
        return ["暂无"];
      }
    },
    handleReset() {
      this.tableLoading = true;
      for (let item in this.search_form) {
        if (item != "pageSize" && item != "currentPage") {
          this.search_form[item] = "";
        }
      }
      this.search_form.currentPage = 1;

      let params = {
        pageSize: 10,
        currentPage: 1,
      };
      this.postPlanningList(params);
    },
    handleTest() {
      console.log("ax");
      this.tableLoading = true;
      let params = this.search_form;
      let _this = this;
      //请求列表数据
      console.log(params);
      postRequest("/plan/all", params)
        .then((resp) => {
          _this.tableLoading = false;
          if (resp.status == 200) {
            let records = resp.data.data.records;
            if (records.length != 0) {
              _this.tableData = records;
            } else {
              _this.tableData = [];
            }
            _this.totalCount = resp.data.data.totalCount;
            this.$forceUpdate();
          } else {
            _this.$message({ type: "error", message: "数据加载失败！" });
          }
        })
        .catch((resp) => {
          _this.$message({ type: "error", message: "数据加载失败！" });
        });
    },
    handleChange(value) {
      // console.log(this.form.distribution_channel);
    },
    handleCurrentChange: function (currentPage) {
      this.search_form.currentPage = currentPage;
      let params = this.search_form;
      this.postPlanningList(params);
    },
  },
  beforeDestroy() {
    console.log("destory");
    // window.bus.$off("planning_list");
  },
  //mounted列表
  activated() {
    console.log("activated");
    this.handleTest();
  },
  deactivated() {
    console.log("deactivated");
  },
  created() {
    console.log("created");
    this.tableLoading = true;
    // window.bus.$on("planning_list", function (e) {
    //   this.search_form = e;
    // });
    this.postPlanningList(this.search_form);
  },
};
</script>
<style type="text/css" scoped>
.create__planning {
  margin-top: 50px;
}

.top__aside {
  background: white;
}
.el-icon-document {
  font-size: 100px;
  color: #409eff;
  margin-top: 30px;
}
.planning__list__top span {
  display: block;
  font-size: 20px;
}
.el-row {
  margin-bottom: 10px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-left: 10px;
  /* background: #d3dce6; */
}
.distribution_channel > .el-input__inner {
  width: 200px;
}
.planListPagination {
  margin: 5px;
}
</style>